<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg
      id="svg"
      width="200"
      height="200"
      fill="#eee"
      style="border: 1px solid #e2e"
    ></svg>
    <div id="div" style="width: 150px; height: 150px; background: #9af"></div>
  </body>
  <script>
    window.onload = () => {
      function svgEvent(e) {
        console.log(2122);
        console.log(e);
      }
      let svg = document.getElementById("svg");
      let div = document.getElementById("div");
      //   svg.addEventListener("click", (e) => {
      //     console.log(e, e.target);
      //   });

      //定义变量储存div的宽高
      var obj_w, obj_h;
      //定义一个变量判断是否执行移动函数
      var mouseDown = false;

      svg.addEventListener("mousedown", (e) => {
        console.log(e, e.target, e.offsetX, e.offsetY);
        obj_w = e.offsetHeight;
      });
      div.addEventListener("mousedown", (e) => {
        console.log(e, e.target, e.offsetWidth, e.offsetY);
        obj_w = e.offsetHeight;
      });
    };
  </script>
</html>
